const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    // js入口文件
    entry: './src/js/main.js',
    output: {
        // 所有依赖模块输出到一个js文件
        filename: 'bundle.js',
        // 输出文件都放到dist目录下
        path: path.resolve(__dirname, './dist')
    },
    module: {
        rules: [
            {
                //用正则去匹配要用该 loader 转换的 css 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    // 转换 .css 文件需要使用的 loader 
                    use: ['css-loader']
                })
                // 在遇到css文件时先用css-loader读取，再交给style-loader读取
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            //从 .js 文件中提取出来的 .css 文件的名称
            filename: `[name].css`
        })
    ]
};
